<template>
  <div class="container">
    <el-row class="">
      <el-col :span="16">
        <el-input v-model="data.params.userName" placeholder="姓名" style="width: 150px; margin-right: 15px" />
        <SelectOption :options="data.gjhInterflowType" :placeholder="'交流类别'" @change-value="changeValue1"> </SelectOption>
        <el-button class="ordinary" @click="search()">搜索</el-button>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="unlock" @click="getUnlock()" v-limit="'KJSL:GJHJLHZ:GJRCJL:UNLOCK'">解锁</el-button>
        <el-button class="lock" @click="getLock()" v-limit="'KJSL:GJHJLHZ:GJRCJL:LOCK'">锁定</el-button>
        <el-button class="ordinary" @click="getExport()"  v-limit="'KJSL:GJHJLHZ:GJRCJL:EXPERT'">批量导出</el-button>
        <el-button type="danger" @click="handleDetect()" v-limit="'KJSL:GJHJLHZ:GJRCJL:DELETE'">批量删除</el-button>
        <el-button type="primary" @click="handleAdd()" v-limit="'KJSL:GJHJLHZ:GJRCJL:ADD'">新增</el-button>
      </el-col>
    </el-row>

    <div>
      <Table :loading="data.isLoading" :tableArr="data.allTableData" :pagination="data.page" :columns="data.columns" @delectTable="delectIds"
       @selectItem="getCurrentList" :total="data.page.total" @currentChange="currentChange" @sizeChange="sizeChange">
        <template #operate="{ row }">
          <el-button size="small" class="ordinary" v-show="row.updateFlag" :disabled="row.isLock == 1" @click="handleEdit(row)" v-limit="'KJSL:GJHJLHZ:GJRCJL:EDIT'">编辑</el-button>
          <el-button size="small" class="ordinary"  @click="handleDetail(row)">详情</el-button>
          <el-button v-if="row.status == '待确认'" size="small" type="primary" :disabled="row.isLock == 1"  v-limit="'KJSL:GJHJLHZ:GJRCJL:CONFIRM'"
            @click="handleConfirm(row)">确认</el-button>
        </template>
      </Table>
    </div>

    <el-dialog v-model="data.dialogVisible" width="60%" top="10vh" :show-close="false" :close-on-click-modal="false">
      <template #title>
        <div class="my-header" v-loading="data.detail_loading">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">
              <Information ref="getAssociation" v-if="data.dialogVisible" @valueFlag="valueFlag"  :orgAllList="data.orgAllList"></Information>
            </el-tab-pane>
            <el-tab-pane label="相关附件" name="second">
              <platformFiles :files="data.files" @dataChange="dataChange" @filesParams="filesParams" download="KJSL:GJHJLHZ:GJRCJL:DOWNLOAD"  upload="KJSL:GJHJLHZ:GJRCJL:UPLOAD" fileDelete="KJSL:GJHJLHZ:GJRCJL:FILEDELETE"></platformFiles>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="third" v-if="data.recordShow">
              <record :changeLogs="data.changeLogs"></record>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseDialog">关闭</el-button>
          <el-button type="primary" @click="handleSave()">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="data.detailVisible" width="60%" top="10vh" :show-close="false" :close-on-click-modal="false">
      <template #title>
        <div class="my-header" v-loading="data.detailVisible_loading">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">
              <Informationxq ref="getAssociation" v-if="data.detailVisible" @valueFlag="valueFlag"  :orgAllList="data.orgAllList"></Informationxq>
            </el-tab-pane>
            <el-tab-pane label="相关附件" name="second">
              <platformFilesxq :files="data.files" @dataChange="dataChange" @filesParams="filesParams" download="KJSL:GJHJLHZ:GJRCJL:DOWNLOAD"  upload="KJSL:GJHJLHZ:GJRCJL:UPLOAD" fileDelete="KJSL:GJHJLHZ:GJRCJL:FILEDELETE"></platformFilesxq>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="third" v-if="data.recordShow">
              <record :changeLogs="data.changeLogs"></record>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import * as proxy from "@/constants/proxy";
import request from "@/utils/request";
import platformFiles from '@/views/science/components/platformFiles/platformFiles.vue';
import platformFilesxq from '@/views/science/components/platformFiles/platformFilesxq.vue';
import record from '@/views/science/components/record/record.vue';
import SelectOption from '@/views/science/components/selectOption/index.vue';
import Table from '@/views/science/components/table/table.vue';
import { Modals, tips } from '@/views/science/components/tips/tips';
import { computed, reactive, ref } from 'vue';
import { useStore } from 'vuex';
import {
  deleteTalent,
  getAddTalent,
  getConfirmTalent,
  getExportTalent,
  getLockTalent,
  getProjectsDetail,
  getTalentDetail,
  getTalentList,
  getUnlockTalent,
  getUpdateTalent
} from '../../api/international';
import Information from './information.vue';
import Informationxq from './informationxq.vue';
import tableData from './tableHeader.json';
import { ElMessage } from "element-plus";
export default {
  components: {
    SelectOption,
    Table,
    Information,
    Informationxq,
    platformFiles,
    platformFilesxq,
    record,
  },
  setup() {
    const store = useStore()
    const activeName = ref('first')
    let data = reactive({
      dialogVisible: false,
      addFlag: 0,
      recordShow: false,
      isLoading: false,
      detail_loading:false,
      page: { page: 1, limit: 10, total: 4 },
      params: {
        userName: '',
        unitId: '',
        communicateClassId: '',
        current: 1,
        size: 10,
      },
      selectedRows: [] as any,
      columns: tableData.platformTableHeader,
      ids: [],
      allTableData: [],
      orgAllList:[],
      gjhInterflowType: computed(() => store.state.technologyStrength.gjhLevelSelect),
      files: [],
      changeLogs: [],
      fileList: [],
      flag: null,
      detailVisible_loading:false,
      detailVisible: false,
    })
    //详情数据获取
    const detailVisibleData = async (id) => {
      data.detailVisible_loading = true
      let res = await getTalentDetail(id)
      if (res.data.success) {
        store.commit('technologyStrength/gettalentInfo', { ...res.data.data.info })
        data.files = res.data.data.files
        data.changeLogs = res.data.data.changeLogs
        data.detailVisible_loading = false
      }else{
        data.detailVisible_loading = false
      }

    }
    const handleDetail = (row) => {
      detailVisibleData(row.id)
      data.detailVisible = true
      data.addFlag = 0
      data.files = []
      store.commit('technologyStrength/emptytalentInfo')
    }

    const handleClose = () => {
      data.detailVisible = false
      data.recordShow = false;
      activeName.value = 'first'
    }
    const changeValue = (item) => data.params.unitId = item.id
    const changeValue1 = (item) => data.params.communicateClassId = item.itemValue

    //主页面表格初始化
    const tableList = async () => {
      data.isLoading =true
      let res = await getTalentList(data.params)
      if (res.data.success) {
        let records = res.data.data
        records.records.map((item) => {
          if (item.status == 0) {
            item.status = "待确认"
          } else {
            item.status = "已确认"
          }
        })
        // 修改时间  去除时分秒
        res.data.data.records.forEach(e =>{
          e.communicateDate =  e.communicateDate.slice(0,11)
        })
        data.allTableData = res.data.data.records
        data.page.total = records.total
        data.isLoading =false
      }else{
        data.isLoading =false
      }
    }

    //详情数据获取
    const detailData = async (id) => {
      data.detail_loading = true
      let res = await getTalentDetail(id)
      if (res.data.success) {
        store.commit('technologyStrength/gettalentInfo', { ...res.data.data.info })
        data.files = res.data.data.files
        data.changeLogs = res.data.data.changeLogs
        data.detail_loading = false
      }else{
        data.detail_loading = false
      }
    }

    const dataChange = () => {
      detailData(store.state.technologyStrength.rowId)
    }

    // 点击查询按键，分页设置为当前页为1，
    const search = () => {
      data.page.page = 1
      console.log(data.params)
      tableList()
    }

    const currentChange = (current) => {
      console.log(current)
      data.params.current = current
      tableList()
    }

    const sizeChange = (size) => {
      console.log(size)
      data.params.size = size
      tableList()
    }
    const getCurrentList = (currentList) => {
      console.log(currentList, 'getCurrentList')
      data.selectedRows = currentList
    }
    const delectIds = (ids) => {
      data.ids = ids
    }

    const valueFlag = (flag) => {
      data.flag = flag
    }

    const filesParams = (params) => {
      data.fileList = params
    }

    const handleDetect = async () => {
      if (data.ids.length) {
        Modals('是否删除选择内容', '提示', 'warning').then(async () => {
          let res = await deleteTalent(data.ids)
          if (res.data.success) {
            tips(res.data.msg, 'success')
            tableList()
          }
        }).catch(() => {
          console.log("点击了取消")
        })

      } else {
        tips('请选择', 'warning')
      }
    }

    const getLock = async () => {
      if (data.ids.length == 1) {
        let flag = true
        console.log(data.selectedRows, 'selectedRows')
        data.selectedRows.forEach((obj) => {
          if (obj.status == '待确认') {
            flag = false
          }
        })
        if (!flag) {
          ElMessage({
            message: '请确认后再进行锁定',
            type: 'warning',
          })
          return
        }
        Modals('是否锁定选择内容', '提示', 'warning').then(async () => {
          let res = await getLockTalent(data.ids)
          if (res.data.success) {
            tips(res.data.msg, 'success')
            tableList()
          }
        }).catch(() => {
          console.log("点击了取消")
        })

      } else if (data.ids.length == 0) {
        tips('请选择', 'warning')
      } else {
        tips('锁定功能不可批量操作', 'warning')
      }
    }

    const getUnlock = async () => {
      if (data.ids.length == 1) {
        Modals('是否解锁选择内容', '提示', 'warning').then(async () => {
          let res = await getUnlockTalent(data.ids)
          if (res.data.success) {
            tips(res.data.msg, 'success')
            tableList()
          }
        }).catch(() => {
          console.log("点击了取消")
        })

      } else if (data.ids.length == 0) {
        tips('请选择', 'warning')
      } else {
        tips('解锁功能不可批量操作', 'warning')
      }
    }

    const getExport = async () => {
      let msg = '是否导出全部数据'
      if(data.ids.length>0){
        msg = '是否导出所选数据'
      }
      Modals(msg, '提示', 'warning').then(async () => {
        const params = {
          ...data.params,
          ids: data.ids
        }
        await getExportTalent(params,"国际人才交流")
      }).catch(() => {
        console.log("点击了取消")
      })
    }

    const handleAdd = async () => {
      data.dialogVisible = true
      data.addFlag = 0
      data.files = []
      store.commit('technologyStrength/emptytalentInfo')
    }

    const handleEdit = (row) => {
      detailData(row.id)
      data.dialogVisible = true
      data.recordShow = true
      data.addFlag = 1
      store.commit('technologyStrength/getRowId', row.id)
    }

    const handleConfirm = async (row) => {
      Modals('是否确认当前流程', '提示', 'warning').then(async () => {
        let res = await getConfirmTalent(row.id)
        if (res.data.success) {
          console.log(res)
          tableList()
        }
      }).catch(() => {
        console.log("点击了取消")
      })
    }

    const getAssociation = ref()
    const handleSave = async () => {
      const form = store.state.technologyStrength.talentInfo
      getAssociation.value.submitForm()
      if (!data.flag) {
        return tips('请将基本信息补充完整', 'warning')
      }
      // if (!validatePhoneNumber(form.partnerContactTel)) {
      //   tips("联系电话格式不正确！", 'warning');
      //   return false;
      // }
      const params = {
        baseInfo: form,
        fileList: data.fileList
      }
      let res
      if (data.addFlag == 0) {
        res = await getAddTalent(params)
      } else {
        res = await getUpdateTalent(params)
      }
      if (res.data.success) {
        console.log(res)
        data.dialogVisible = false
        activeName.value = 'first'
        tableList()
      }
    }

    const handleCloseDialog = () => {
      data.dialogVisible = false;
      data.recordShow = false;
      activeName.value = 'first'
    }

    const getUnit = () => {

      return request({
                url: proxy.CHECC_API_CMS + "/org/getSysOrgList",
                method: "get",
            }).then(res => {
                data.orgAllList = res.data.data
            })
    }

    tableList()
    getUnit()

    return {
      data,
      store,
      activeName,
      valueFlag,
      filesParams,
      getAssociation,

      getLock,
      getUnlock,
      getExport,
      changeValue,
      changeValue1,
      dataChange,

      handleCloseDialog,
      getCurrentList,
      delectIds,
      currentChange,
      sizeChange,
      handleDetect,
      handleAdd,
      handleEdit,
      handleConfirm,
      search,
      handleSave,
      handleDetail, //详情
      handleClose, //详情
    }
  },
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}

:deep(.el-dialog__body) {
  display: none;
}

// .el-col {
//   line-height: 60px;
// }

.pageName {
  font-weight: 700;
}

.el-form-item {
  .el-input {
    width: 100px;
  }

  .el-select {
    width: 100px;
  }
}

:deep(.demo-tabs>.el-tabs__content) {
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

:deep(.demo-tabs>.el-tabs__content::-webkit-scrollbar) {
  display: none;
  /* Chrome Safari */
}
</style>
